<template>
	<view class="zone">
		<Header title="灵宠"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<view class="stabs">
				<view class="tabs">
					<view :class="['tab',stat==item.id?'act':'']" v-for="(item,index) in tablist" :key="index"
						@click="changeTab(item.id)">
						{{item.name}}
					</view>
				</view>
			</view>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box">
				<view class="info" v-if="stat==1">
					<view class="part" v-for="(item,i) in list" :key="i">
						<view class="title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
							<view class="sgabb">{{item.name}}</view>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
						</view>
						<view class="rbox1">
							<view class="yboxy">
								<view class="hxg">
									<text v-if="item.coin_in==0">免费饲养</text>
									<text v-else>饲养灵宠需要{{item.coin_in}}</text>
									<image v-if="item.coin_in!=0" src="http://image.qxgm.site/tdz/img/game/mg-06.png"
										mode="widthFix">
									</image>
								</view>
								<view class="weiyang2" v-if="item.coin_in==0">
									永久每日领取
								</view>
								<view class="weiyang" v-if="item.is_adopt != 1" @click="confirmFeed(item)">
									立即饲养
								</view>
							</view>
							<view class="uybap">
								<text>{{item.day_times}}天可领</text>
								<text class="hui">··········</text>
								<text>{{item.day_times*item.day_get}}</text>
							</view>
						</view>
						<view class="rbox2">
							<view class="ppbix">
								<text class="p1">每日可领铜钱:</text>
								<text class="p2">{{item.day_get}}</text>
								<text class="p3" v-if="item.is_adopt != 1">(未饲养)</text>
								<text class="p4" v-else>(已领取天数:{{item.day_times - item.left_times}}天)</text>
							</view>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								:class="[item.is_collect != 1 && item.is_adopt == 1 ? 'receive' : 'received' ]"
								@click="getlingqu(item)">
								领取
							</u-button>
						</view>
					</view>
				</view>
				<view class="info2" v-else>
					<view class="jbox" v-for="(item,index) in list2" :key="index">
						<view class="sbox">
							<view class="ppboj">
								<view class="zuolv">
									{{item.name}}
								</view>
								<view class="zipling">
									<view class="zop">
										{{item.day_times}}天可领{{item.day_times*item.day_get}}灵石
									</view>
									<view class="zipbox" @click="comfirmsijia(item)" v-if="item.is_adopt != 1">
										立即饲养
									</view>
								</view>
							</view>
							<view :class="['imgbox','backbox'+index]"></view>
							<!-- <image class="chong" src="http://image.qxgm.site/tdz/img/lingchong/mg-05.png" mode="widthFix"></image> -->
						</view>
						<view class="hbioxb">
							<view class="hksj">
								每日可领灵石:<text class="t1">{{item.day_get}}</text><text
									class="t2">(已领取天数:{{item.left_times}}/{{item.day_times}})</text>
							</view>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								:class="[item.is_collect != 1 && item.is_adopt == 1 ? 'receive' : 'received' ]"
								@click="lingquzq(item)">领取</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 饲养确认 -->
		<u-mask :show="feeding">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>饲养确认</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop2">
							<view v-if="item.coin_in == 0">您确认要</view>
							<view v-else>您确认要使用<text class="t1">{{item.coin_in}}铜钱</text><br></view>
							饲养灵兽<text class="t2">{{item.name}}</text>吗？<br>
							灵兽{{item.day_times}}天可产出<text class="t1">{{item.day_times*item.day_get}}铜钱</text>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="againCofirm">确认饲养</u-button>
						<view class="sendtip">
							当前铜币：{{userinfo.tongqian}}
						</view>
					</view>
				</view>
				<image class="m_close" @click="feeding = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 饲养确认 -->
		<u-mask :show="feeding2">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>饲养确认</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop2">
							<view v-if="item.coin_in == 0">您确认要</view>
							<view v-else>您确认要使用<text class="t1">{{item.coin_in}}灵石</text><br></view>
							饲养坐骑<text class="t2">{{item.name}}</text>吗？<br>
							坐骑{{item.day_times}}天可产出<text class="t1">{{item.day_times*item.day_get}}灵石</text>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="againCofirm2">确认饲养</u-button>
						<view class="sendtip">
							当前灵石：{{userinfo.lingshi}}
						</view>
					</view>
				</view>
				<image class="m_close" @click="feeding2 = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 产出加速 -->
		<u-mask :show="acceler">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>产出加速</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop3">
							<view class="jiasuop">
								<image class="suimg" src="http://image.qxgm.site/tdz/img/lingchong/mg-07.png"
									mode="widthFix"></image>
								<text>123</text>
							</view>
							<view class="sccessp">
								该坐骑已经加速了<text class="tt3">99</text>次 <br>
								还能加速<text class="tt3">99</text>次
							</view>
							<view class="sccessp2">
								使用加速卡立刻产出？
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="againjiasu">确认加速</u-button>
					</view>
				</view>
				<image class="m_close" @click="acceler = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 恭喜获得 -->
		<u-mask :show="obtain" @click="obtain = false">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<view class="plist">
							<view class="parts" v-if="stat == 1">
								<view class="sbimg">
									<image class="tanimg" src="http://image.qxgm.site/tdz/img/tk/mg-04.png"
										mode="widthFix">
									</image>
								</view>
								<view class="toan">
									铜币X{{money}}
								</view>
							</view>
							<view class="parts" v-if="stat == 2">
								<view class="sbimg">
									<image class="tanimg" src="http://image.qxgm.site/tdz/img/tk/mg-03.png"
										mode="widthFix">
									</image>
								</view>
								<view class="toan">
									灵石X{{item.day_get}}
								</view>
							</view>
						</view>
						<view class="refineCon2" @click="obtain=false">确定</view>
					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="obtain = false">
					点击任意位置退出
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				acceler: false,
				tanName: '铜币',
				obtain: false,
				feeding: false,
				feeding2: false,
				tablist: [{
						id: 1,
						name: '灵宠',
						isrequest: false,
					},
					{
						id: 2,
						name: '坐骑',
						isrequest: false,
					},

				],
				stat: 1,
				list: [],
				userinfo: uni.getStorageSync('userinfo'),
				item: {},
				list2: [],
				level: '',
                money:''
			}
		},

		onLoad(option) {
			this.stat = option.id
			if (this.stat == 1) {
				this.petlistbtn()
			} else {
				this.mountfun()
			}

		},
		methods: {
			//灵宠列表
			async petlistbtn() {
				let res = await this.$http.index.petlist()
				if (res.code == 1) {
					this.list = res.data
				}
			},
			//坐骑列表
			async mountfun() {
				let res = await this.$http.index.mount()
				if (res.code == 1) {
					this.list2 = res.data
				}
			},
			// 切换
			changeTab(id) {
				if (id == 2) {
					if (this.list2.length == 0) {
                        if(this.userinfo.level < 13){
                            this.$u.toast('化神期解锁')
                        }else{
                            this.stat = id
                            this.mountfun()
                        }
					}else{
                        this.stat = id
                    }
				} else if (id == 1) {
					if (this.list.length == 0) {
						this.stat = id
						this.petlistbtn()
					}else{
                        this.stat = id
                    }
				}
			},
			// 立即饲养
			confirmFeed(item) {
				this.getUserInfo()
				this.feeding = true
				this.item = item
			},
			async againCofirm() {
				let res = await this.$http.index.petadopt({
					pet_id: this.item.id
				})

				if (res.code == 1) {
					// this.list = []
					this.petlistbtn()
					this.getUserInfo();
					this.feeding = false
				} else {
					this.$u.toast(res.msg)
				}
			},
			// 每日领取
			async getlingqu(item) {
                
                this.item = item
                let res = await this.$http.index.petget({
                	pet_id: this.item.id
                })
                if (res.code == 1) {
                	this.money = res.data
                	this.petlistbtn()
                	this.obtain = true
                } else {
                	this.$u.toast(res.msg)
                }
                
				
			},
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data
					this.level = res.data.level
					uni.setStorageSync('userinfo', res.data)
				}
			},
			// 坐骑饲养
			async comfirmsijia(item) {
				this.feeding2 = true
				this.item = item
				this.getUserInfo();
			},
			async againCofirm2() {
				let res = await this.$http.index.mountadopt({
					mount_id: this.item.id
				})

				if (res.code == 1) {
					// this.list2 = []
					this.mountfun()
					this.feeding2 = false
				} else {
					this.$u.toast(res.msg)
				}
			},
			//领取坐骑
			async lingquzq(item) {
				this.item = item
				let res = await this.$http.index.mountget({
					mount_id: item.id
				})
				if (res.code == 1) {
					// this.list2 = []
					this.mountfun()
					this.obtain = true
				} else {
					this.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="less">
	.backbox0 {
		background: url(http://image.qxgm.site/tdz/img/tk/dh7.png) no-repeat;
		height: 150px;
		width: 200px;
		background-size: 75% auto;
		background-repeat: no-repeat;
		margin: 20px auto 0;
		animation: changesbig 1s steps(7) infinite;
		transform: translateY(20px);
	}

	.backbox1 {
		background: url(http://image.qxgm.site/tdz/img/tk/dh1.png) no-repeat;
		height: 150px;
		width: 200px;
		background-size: 75% auto;
		background-repeat: no-repeat;
		margin: 20px auto 0;
		animation: changesbig 1s steps(7) infinite;
	}

	.backbox2 {
		background: url(http://image.qxgm.site/tdz/img/tk/dh3.png) no-repeat;
		height: 150px;
		width: 200px;
		background-size: 75% auto;
		background-repeat: no-repeat;
		margin: 20px auto 0;
		animation: changesbig 1s steps(7) infinite;
	}

	.backbox3 {
		background: url(http://image.qxgm.site/tdz/img/tk/dh5.png) no-repeat;
		height: 150px;
		width: 200px;
		background-size: 75% auto;
		background-repeat: no-repeat;
		margin: 20px auto 0;
		animation: changesbig 1s steps(7) infinite;
	}

	.backbox4 {
		background: url(http://image.qxgm.site/tdz/img/tk/dh4.png) no-repeat;
		height: 150px;
		width: 200px;
		background-size: 75% auto;
		background-repeat: no-repeat;
		margin: 20px auto 0;
		animation: changesbig 1s steps(7) infinite;
	}

	.backbox5 {
		background: url(http://image.qxgm.site/tdz/img/tk/dh2.png) no-repeat;
		height: 150px;
		width: 200px;
		background-size: 75% auto;
		background-repeat: no-repeat;
		margin: 20px auto 0;
		animation: changesbig 1s steps(7) infinite;
	}

	.backbox6 {
		background: url(http://image.qxgm.site/tdz/img/tk/dh6.png) no-repeat;
		height: 150px;
		width: 200px;
		background-size: 75% auto;
		background-repeat: no-repeat;
		margin: 20px auto 0;
		animation: changesbig 1s steps(7) infinite;
	}

	@keyframes changesbig {

		/* 这个0%表示开始状态 */
		0% {
			background-position: 0 0;
		}

		/* 这个100%表示结束状态 */
		100% {
			background-position: 0 100%;
		}
	}

	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}


	.main {
		width: 100%;
		position: relative;
		margin-top: 10px;
	}

	.yun {
		width: 44%;
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.info {
		padding: 10px 16px;
		height: calc(100vh - 188px);
		overflow-y: scroll;
	}

	.info2 {
		padding: 0px 0px;
		height: calc(100vh - 188px);
		overflow-y: scroll;
	}

	.box {
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 0px;
	}

	.tabs {
		width: 86%;
		padding: 8px 16px;
		display: flex;
		align-items: center;
		background: url(http://image.qxgm.site/tdz/img/lingchong/mg-04.png) no-repeat;
		background-size: 100% 100%;

		.tab {
			width: 33%;
			background: url(http://image.qxgm.site/tdz/img/public/tab2.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
			margin-right: 5px;
		}

		.act {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/public/tab1.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-05.png) no-repeat;
		background-size: 100% 100%;
		padding: 10px 0 8px;

		image {
			width: 18%;
		}

		.sgabb {
			font-size: 20px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;

			text {
				color: #CC6600;
				margin-left: 4px;
			}
		}
	}

	.part {
		margin-bottom: 18px;

		.rbox1 {
			background: rgba(255, 255, 255, 0.34);
			border-radius: 5px;
			padding: 9px 16px 15px;
			margin-bottom: 3px;

			.yboxy {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.hxg {
				display: flex;
				align-items: center;

				image {
					width: 20px;
				}
			}

			.weiyang {
				width: 73px;
				height: 32px;
				text-align: center;
				font-size: 14px;
				font-weight: normal;
				color: #c5f0f7;
				line-height: 32px;
				text-shadow: 0 1px 1px #006599;
				background: url(http://image.qxgm.site/tdz/img/youchai/mg-03.png) no-repeat;
				background-size: 100% 100%;
			}

			.weiyang2 {
				font-size: 15px;
				font-weight: normal;
				color: #666666;
				line-height: 15px;
			}

			.uybap {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 15px;
				font-weight: normal;
				color: #333333;
				line-height: 15px;
				margin-top: 14px;
			}

			.hui {
				color: #bbaeb4;
			}
		}

		.rbox2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: rgba(255, 255, 255, 0.34);
			border-radius: 5px;
			padding: 2px 16px 2px;

			.ppbix {
				font-size: 12px;
				font-weight: normal;
				line-height: 14px;
			}

			.p1 {
				color: #333333;
			}

			.p2 {
				color: #FF3366;
			}

			.p3 {
				color: #0099CC;
			}

			.p4 {
				font-size: 10px;
			}



		}
	}

	.jbox {
		background: url(http://image.qxgm.site/tdz/img/lingchong/mg-02.png) no-repeat;
		background-size: 100% auto;
		padding-bottom: 8px;

		.ppboj {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 12px;
		}

		.zuolv {
			width: 110px;
			text-align: center;
			font-size: 15px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 27px;
			background: url(http://image.qxgm.site/tdz/img/lingchong/mg-01.png) no-repeat;
			background-size: 100% 100%;
		}

		.zop {
			font-size: 14px;
			font-weight: normal;
			color: #FFFFFF;
			text-shadow: 0 1px 1px #564B47;
			margin-right: 4%;
		}

		.zipling {
			display: flex;
			align-items: center;
		}

		.zipbox {
			width: 66px;
			height: 29px;
			font-size: 13px;
			font-weight: normal;
			color: #bef2fa;
			line-height: 29px;
			text-shadow: 0 1px 1px #006599;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-03.png) no-repeat;
			text-align: center;
			background-size: 100% 100%;
		}

		.sbox {
			padding: 10px 0 20px;
		}

		.chong {
			display: block;
			margin: 0 auto;
			width: 46%;
		}

		.hbioxb {
			display: block;
			margin: -10px auto 0;
			width: 94%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/lingchong/mg-03.png) no-repeat;
			background-size: 100% 100%;
			padding: 3px 13px;
			box-sizing: border-box;
		}

		.hksj {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
		}

		.t1 {
			color: #666;
		}

		.t2 {
			font-size: 12px;
			color: #666;
		}

		.lingqu {
			width: 75px;
			height: 33px;
			font-size: 14px;
			font-weight: normal;
			line-height: 33px;
			color: #fdf5c7;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-05.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.jihuop2 {
		font-size: 15px;
		font-weight: normal;
		color: #50433A;
		line-height: 30px;
		text-align: center;
		padding: 0 10%;

		.t1 {
			font-size: 18px;
			color: #ED519F;
		}

		.t2 {
			font-size: 18px;
			color: #4587FF;
		}
	}

	.sendtip {
		text-align: center;
		margin-top: 10px;
	}

	.getLevel {
		display: block;
		margin: 13px auto 0;
		width: 36%;
		font-size: 18px;
		font-weight: normal;
		color: #f9e5b6;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.plist {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 14px;

		.parts {
			width: 25%;
			box-sizing: border-box;
		}

		.sbimg {
			display: block;
			margin: 0 auto;
			width: 53%;
			padding: 4% 3%;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
		}

		.tanimg {
			width: 100%;
		}

		.toan {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-top: 12px;
			text-align: center;
		}

	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
        text-align: center;
	}

	.jihuop3 {
		text-align: center;
		font-size: 15px;
		font-weight: normal;
		color: #50433A;
		line-height: 18px;

		.jiasuop {
			padding: 1px 7px;
			box-sizing: border-box;
			position: relative;
			display: block;
			margin: 0 auto;
			width: 64px;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 18px;

			text {
				position: absolute;
				bottom: 2px;
				right: 2px;
				font-size: 15px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 18px;
				text-shadow: 0 1px 1px #333333;
			}
		}

		.suimg {
			width: 100%;
		}

		.tt3 {
			color: #FF6699;
			font-size: 18px;
		}

		.sccessp2 {
			font-size: 15px;
			font-weight: normal;
			color: #50433A;
			line-height: 18px;
			margin-top: 25px;
		}
	}

	.receive {
		display: block;
		width: 75px;
		font-size: 13px;
		height: 33px;
		font-weight: normal;
		text-align: center;
		color: #f9e5b6;
		line-height: 33px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.received {
		filter: grayscale(100%);
		display: block;
		width: 75px;
		font-size: 13px;
		height: 33px;
		font-weight: normal;
		text-align: center;
		color: #f9e5b6;
		line-height: 33px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}
</style>